import styles from './index.module.scss'
import { formatDate } from '@/utils/date'
import cm from 'classnames'
import Link from 'next/link'

const Index = props => {
  const { data } = props
  if (!data || !data.length) return null

  return (
    <div className={styles.focusBox}>
      {data.map((item, index) => {
        if (!item) {
          return <div className={cm(styles.hotItem, styles.hotItemHide)} key={index}></div>
        }
        const { month, day, hour, minutes } = formatDate(item.startTime)

        return (
          <Link href={`/sports/live/${item.matchID}`} className={styles.hotItem} key={index}>
            {item.status === 1 ? <span className={cm(styles.status, styles.statusLiving)}>直播中</span> : null}
            {item.status === 2 ? <span className={cm(styles.status, styles.status)}>已结束</span> : null}
            {item.status === 0 || item.status === 3 ? (
              <span className={cm(styles.status, styles.statusNotStart)}>未开始</span>
            ) : null}
            <p className={styles.hotTitle}>{item.competition}</p>
            <div className={styles.hotDate}>{`${month}月${day}日 ${hour}:${minutes}`}</div>
            <div className={styles.teamBox}>
              {item.confrontTeams?.length >= 2 ? (
                <>
                  <div className={styles.teamItem}>
                    <img loading="lazy" src={item.confrontTeams[0].image} alt={item.confrontTeams[0].name} />
                    <span className="textEllipsis">{item.confrontTeams[0].name}</span>
                  </div>
                  <div className={styles.teamCenter}>
                    {item.status === 0 || item.status === 3
                      ? 'VS'
                      : `${item.confrontTeams[0].score} : ${item.confrontTeams[1].score}`}
                  </div>
                  <div className={styles.teamItem}>
                    <img loading="lazy" src={item.confrontTeams[1].image} alt={item.confrontTeams[1].name} />
                    <span className="textEllipsis">{item.confrontTeams[1].name}</span>
                  </div>
                </>
              ) : (
                <div className={styles.onlyTitle}>{item.title}</div>
              )}
            </div>
          </Link>
        )
      })}
    </div>
  )
}
export default Index
